<template>
  <div>
    <Reload></Reload>
    <section id="keepHealthHeader" class="hero py-2">
      <div class="hero-bg-graphics">
        <!-- <img src="../../assets/img/hero-bg-01.png" alt="/" /> -->
      </div>
      <div class="hero-center">
        <div class="container">
          <div class="row align-items-center">
            <!-- HERO TEXT -->
            <div class="col-lg-5">
              <div class="hero-txt">
                <div>
                  <h5 class="hotBookTitle">
                    <span>BEST POPULAR BOOK OF THE WEEK</span>
                  </h5>
                  <!-- Title -->
                  <h1 class="hotBookName font-weight-bold">《温热经纬》</h1>
                  <!-- Text -->

                  <h5 class="hotBookContent pt-3">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Dicta numquam, enim ex impedit suscipit ea, quae, excepturi
                    repellendus natus corrupti asperiores sint molestias optio
                    consequuntur necessitatibus amet ipsam culpa sapiente. Lorem
                    ipsum dolor sit amet consectetur, adipisicing elit. Numquam
                    libero eos magnam quidem harum ipsum veritatis fuga nemo
                    totam, laudantium alias! Accusamus nemo, excepturi
                    recusandae perspiciatis obcaecati quos expedita repellat.
                  </h5>
                </div>
                <!-- Buttons -->
                <div class="hero-btns">
                  <a href="javascript:;" class="btn">
                    <span>开始阅读</span>
                  </a>
                </div>
              </div>
            </div>
            <!-- END HERO TEXT -->

            <!-- HERO IMAGE -->
            <div class="col-lg-7">
              <div class="hero-img">
                <img
                  class="img-fluid"
                  src="../../assets/img/undraw_book_lover_mkck.svg"
                  alt="hero-image"
                />
              </div>
            </div>
          </div>
          <!-- End row -->
        </div>
        <!-- End container -->
      </div>
      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <section>
      <KeepHealthNav :nowPage="0"></KeepHealthNav>
    </section>

    <section id="aboutKeepHealth" class="about py-3">
      <!-- <div class="about-bg-graphics">
        <img src="../../assets/img/about-bg.png" alt="/" />
      </div> -->
      <div class="container px-0">
        <div class="row mx-0">
          <aside class="col-9 row">
            <div class="col-lg-7 mb-4 mb-lg-0">
              <img src="../../assets/img/about-01.jpg" alt="/" class="w-100" />
            </div>

            <div class="col-lg-5">
              <!-- Title -->
              <div class="section-title">
                <h3 class="sub-title mb-2">Recommended Book</h3>
                <h2 class="title">《Lorem, ipsum dolor.》</h2>
              </div>

              <!-- Text -->
              <p class="text-muted my-3 hotBookContent">
                Based on the analysis of Chinese medicine data, this website is
                committed to providing users with a one-stop health information
                service and health status analysis. Under the premise of
                ensuring safety, each user can use Chinese medicine rationally.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
                eligendi minima optio excepturi reiciendis reprehenderit porro
                quis fugiat recusandae? Quos veniam, qui quidem esse odit
                deserunt possimus culpa temporibus corporis.
              </p>

              <!-- Buttons -->
              <div class="hero-btns">
                <a
                  href="javascript:void(0);"
                  class="btn btn-purple mt-3 mb-lg-0 mr-4"
                  >进入阅读</a
                >
              </div>
            </div>
            <!-- End row -->
            <section id="blogBookList">
              <section id="blogTitle" class="blog py-3">
                <div class="container">
                  <!-- Title -->

                  <!-- <div class="blog-section-right-bg">
                    <img
                      src="../../assets/img/blog-section-right-bg.png"
                      alt="/"
                    />
                  </div> -->

                  <div class="blog-section-left-bg">
                    <img
                      src="../../assets/img/blog-section-left-bg.png"
                      alt="/"
                    />
                  </div>
                </div>
              </section>

              <section id="bookList" class="continue py-3">
                <div class="row">
                  <div
                    v-for="(p, index) in 8"
                    :key="index"
                    id="bookCard"
                    class="col-lg-6 col-md-6 mt-3"
                  >
                    <a href="javascript:;">
                      <div class="continue">
                        <div class="row rounded">
                          <div class="bookCard-image col-4 my-auto">
                            <img
                              src="../../assets/img/blog/blog-img-01.jpg"
                              alt="/"
                              class="rounded"
                            />
                          </div>

                          <div
                            class="bookCard-info col-8 rounded-bottom text-left py-3"
                          >
                            <div class="bookCard-title">
                              <span>《温热经纬》</span>
                            </div>
                            <span class="bookCard-content">
                              <a
                                href="blog-single-01.html"
                                target="_blank"
                                class="text-dark"
                                >Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Voluptatem laborum cupiditate
                                est accusamus tempore suscipit minima voluptates
                                inventore et vitae, sit atque, quo perspiciatis
                                impedit, eligendi quidem assumenda eum
                              </a>
                            </span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
                <PageChange></PageChange>
              </section>
            </section>
          </aside>

          <aside class="col-3">
            <div class="pl-0">
              <!-- Search Field -->
              <div id="search-field" class="sidebar-div mb-5">
                <div class="input-group mb-3">
                  <input
                    type="text"
                    class="form-control"
                    placeholder="搜索内容"
                    aria-label="Search"
                    aria-describedby="search-field"
                  />
                </div>
              </div>

              <!-- Most Popular Posts -->
              <div id="popularBooks" class="sidebar-div mt-5">
                <!-- Title -->
                <h5 class="mb-2">热门书籍</h5>

                <ul class="popular-posts mt-4">
                  <!-- Popular post #1 -->
                  <li
                    v-for="(p, index) in 4"
                    :key="index"
                    class="row clearfix d-flex align-items-center"
                  >
                    <!-- Image -->
                    <img
                      class="col-6"
                      src="../../assets/img/22.jpg"
                      alt="blog-post-preview"
                    />

                    <!-- Text -->
                    <div class="post-summary col-6">
                      <p href="javascript:;" class="bookName rose-hover">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Nesciunt, explicabo.
                      </p>
                      <p class="bookContent">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Expedita, sint?
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
          <!-- END SIDEBAR RIGHT -->
        </div>
      </div>
      <!-- End container -->
    </section>
    <!-- END ABOUT -->

    <!-- BLOG
            ============================================= -->

    <!-- END BLOG -->
  </div>
</template>

<script>
import PageChange from "../../components/PageChange.vue";
import KeepHealthNav from "../../components/KeepHealthNav.vue";
import Reload from "../../components/Reload.vue";

export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  components: {
    PageChange,
    KeepHealthNav,
    Reload,
  },
};
</script>

<style scoped>
#bookList {
  padding: 0 5%;
}
#bookCard {
  border-radius: 10px;
  padding: 5px;
  transition: all 0.5s ease-in-out;
}
#bookCard:hover {
  box-shadow: 0 20px 40px 0 rgb(43 35 79 / 14%);
}
#bookCard .bookCard-image {
  padding-right: 0;
  /* border: 1px solid #000; */
}
#bookCard .bookCard-image img {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
/* #bookCard .bookCard-info {
  padding-left: 0;
} */
#bookCard .bookCard-title span {
  font-size: 22px;
  line-height: 25px;
  font-weight: 700;
  color: #444;
}
#bookCard .bookCard-content {
  margin-top: 8px;
}
#bookCard .bookCard-content a {
  font-size: 18px;
  color: #7e828a;
  font-weight: 500;
  line-height: 1.618;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 头部 */
#keepHealthHeader {
  background: #fff !important;
  height: 88vh;
}
#keepHealthHeader .hero-txt {
  padding-left: 10%;
}
#keepHealthHeader .hotBookName {
  transform: translateX(-20px);
  color: #273c5f;
}
#keepHealthHeader .hotBookTitle {
  margin-top: 20px;
  font-size: 15px;
  color: #ff8557;
  font-weight: bold;
}
#keepHealthHeader .hotBookContent {
  color: #747f9b;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

#aboutKeepHealth .hotBookContent {
  color: #747f9b;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
#aboutKeepHealth {
  border-bottom: 2px solid #6159e6;
}
#aboutKeepHealth .title {
  color: #273c5f;
  font-size: 22px;
}
#aboutKeepHealth .section-title {
  margin-top: 10px;
}

#popularBooks img {
  display: inline-block;
  width: 40%;
  /* border-radius: 10px; */
}
#popularBooks .post-summary {
  padding: 0;
}
#popularBooks .popular-posts li {
  margin-bottom: 20px;
}
#popularBooks .bookName {
  padding: 0;
  margin: 15px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#popularBooks .bookContent {
  color: #747f9b;
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
